<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    title="选择课件"
    width="80%"
    top="5vh"
    @close="handleClose">
    <el-row
      :gutter="20"
      class="app-container">
      <el-col :span="24">
        <data-table
          ref="pagingTable"
          :options="options"
          :list-query="listQuery"
          @select-changed="handleSelected">
          <template #filter-content>
            <el-row>
              <el-col :span="24">
                <el-input
                  v-model="listQuery.params.title"
                  style="width: 200px"
                  placeholder="搜索课件名称"
                  class="filter-item"
                  size="small" />
                <dic-list-select
                  title="请选择课件类型"
                  v-model="listQuery.params.catId"
                  dic-code="course_file_catalog" />
                <dic-list-select
                  title="请选择课件格式"
                  v-model="listQuery.params.fileType"
                  dic-code="course_file_type"
                  class="filter-item" />
                <el-button
                  :disabled="selectedList.length === 0"
                  type="primary"
                  size="small"
                  class="filter-item confirm_btn"
                  @click="handleConfirm"
                  >{{ selectedLabel }}</el-button
                >
                <el-button
                  type="primary"
                  size="small"
                  class="confirm_btn"
                  @click="handleAdd('second')"
                  >添加课件</el-button
                >
              </el-col>
            </el-row>
          </template>

          <template #data-columns>
            <el-table-column
              label="课件名称"
              align="center"
              prop="title" />
            <el-table-column
              label="课件大小"
              align="center"
              prop="fileSize" />
            <el-table-column
              label="课件时长"
              align="center"
              show-overflow-tooltip>
              <template v-slot="scope">
                <span v-if="scope.row.duration === 0">无</span>
                <span v-else>
                  <sec-format :value="scope.row.duration" />
                </span>
              </template>
            </el-table-column>

            <el-table-column
              label="课件类型"
              align="center"
              prop="fileType_dictText" />
          </template>
        </data-table>
      </el-col>
    </el-row>
    <CourseFile
      ref="CourseFile"
      @DHCompleteGen="completeGen"
      @getList="$refs.pagingTable.getList()" />
  </el-dialog>
</template>

<script>
import DataTable from "@/components/DataTable";
import DicTree from "../DicTree/index";
import SecFormat from "@/components/SecFormat";
import DicListSelect from "@/components/DicListSelect";
import CourseFile from "@/components/AddCourseFile";
// import DigitalHumanGennerate from '@/components/DigitalHumanGenerate'

export default {
  name: "CourseFileDialog",
  components: { DicListSelect, SecFormat, DicTree, DataTable, CourseFile },
  props: {
    excludes: Array,
    visible: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      dialogVisible: false,
      selectedLabel: "请勾选课件",

      listQuery: {
        current: 1,
        size: 10,
        params: {
          excludes: [],
          createBy: this.$store.getters.userId,
          // courseId
        },
      },

      // 选定的数据列表
      selectedList: [],

      options: {
        // 可批量操作
        multi: true,
        multiShow: false,
        // 列表请求URL
        listUrl: "/api/course/file/paging",
      },
    };
  },

  watch: {
    // 检测查询变化
    visible: {
      handler() {
        this.dialogVisible = this.visible;
        if (this.dialogVisible && this.$refs.pagingTable !== undefined) {
          this.$refs.pagingTable.getList();
        }

        console.log(this.visible);
      },
      deep: true,
    },

    excludes: {
      handler() {
        this.listQuery.params.excludes = this.excludes;
      },
      deep: true,
    },

    selectedList: {
      handler(val) {
        if (val.length > 0) {
          this.selectedLabel = "确认" + val.length + "项";
        } else {
          this.selectedLabel = "请勾选课件";
        }
      },
      deep: true,
    },
  },

  created() {
    this.dialogVisible = this.visible;
    //获取courseId
    // const url = window.location.href;
    // const match = url.match(/\/update\/(\d+)/);
    // if (match && match[1]) {
    //   this.listQuery.params.courseId = match[1];
    //   console.log("courseId", this.listQuery.params.courseId);
    // }
  },

  methods: {
    // 选定回调
    handleSelected(obj) {
      this.selectedList = obj.objs;
    },

    // 关闭回调
    handleClose() {
      this.$emit("update:visible", false);
    },

    // 确认选定
    handleConfirm() {
      this.$emit("update:visible", false);
      this.$emit("select", this.selectedList);
      this.$refs.pagingTable.clearSelection();
    },
    completeGen(e) {
      if (e) {
        this.$refs.pagingTable.refresh();
      }
    },
    handleAdd(type) {
      this.$refs.CourseFile.handleAdd(type);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 0px;
}

/deep/.el-button--success {
  background-color: #6f5af6 !important;
  border-color: #6f5af6 !important;
  position: relative;
}

/deep/.el-button--success:active {
  background-color: #501fe3 !important;
  border-color: #501fe3 !important;
}

/deep/.el-button--success::before {
  content: "";
  width: 60px;
  height: 18px;
  background: url("../../assets/exam/corner_mark.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: -50%;
  right: -50%;
}

.confirm_btn {
  margin-right: 15px;
  min-width: 90px;
}
</style>
